<template>
    <Header></Header>
    <div class="container">
        <div class="subDescription">
            <div class="title">
                <h3>1.返回最大值</h3>
            </div>
            <div class="description">
                <span>给定两个数num1和num2，请返回它们的最大值。</span>
            </div>
            <div class="tips">
                <strong>你可以在你自己的代码编辑器中攥写并且调试代码,<br>在调试好后再把代码粘贴到下面的代码编辑器中作为答案。</strong>
            </div>
            <div class="example">
                <strong>示例: </strong>
                <p><strong>输入: </strong> num1 = 10, num2 = 20</p>
                <p><strong>输出: </strong> 20</p>
            </div>
            <div class="judge">
                <strong>评判代码: </strong>
                <p>1. 代码正确性: 代码能够正确通过测试用例。</p>
                <p>2. 确保代码与下列声明的函数一致。</p>
                <Codemirror v-model:value="judgeCode" :options="judgeCmOptions" border ref="cmRef" height="260px"
                    width="500px" @change="" @input="" @ready="">
                </Codemirror>
            </div>
        </div>
        <div class="codeEdit">
            <el-select v-model="value" placeholder="C" style="width: 240px">
                <el-option v-for="item in mode" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <Codemirror v-model:value="code" :options="cmOptions" border ref="cmRef" height="80%" width="100%" @change=""
                @input="" @ready="">
            </Codemirror>
        </div>
        <button @click="getHistory">点击</button>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, onUnmounted, reactive } from "vue"
import "codemirror/mode/clike/clike"
import Codemirror from "codemirror-editor-vue3"
import type { CmComponentRef } from "codemirror-editor-vue3"
import type { Editor, EditorConfiguration } from "codemirror"
import Header from "../components/header.vue"
import { useUrlStore } from "../stores/urlStore"

const code = ref(
    `int max(int num1, int num2)
{

}`)
const judgeCode = ref(
    `#include <stdio.h>
#include <stdlib.h>
    
int max(int num1, int num2);

int main()
{
    int num1, num2, maxNum;
    scanf("%d %d", &num1, &num2);
    maxNum = max(num1, num2);
    printf("%d", maxNum);

    reuturn 0;
}

// 右边的代码将会被放于此处
// code...
    `
)

const cmRef = ref<CmComponentRef>()
const cmOptions: EditorConfiguration = {
    mode: "text/x-c++src"
}
const judgeCmOptions: EditorConfiguration = {
    mode: "text/x-c++src",
    readOnly: true
}

let value = ref('')
const mode = reactive([
    { value: "c", label: "C" },
])

const urlStore = useUrlStore()
const getHistory = async () => {
    try {
        let token: any = sessionStorage.getItem("token")
        let resp = await fetch(`${urlStore.baseurl}/exam/loadResponds`, {
            method: 'GET',
            headers: {
                "Content-Type": "application/json",
                "token": token
            }
        })
        let data = await resp.json()
        console.log(data)
    } catch (error) {
        console.log(error)
    }
}

onMounted(() => {

})

onUnmounted(() => {
    cmRef.value?.destroy()
})
</script>


<style scoped lang="scss">
.container {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;

    .subDescription {
        height: 95vh;
        display: flex;
        flex-direction: column;
        width: 800px;
        justify-content: start;
        align-items: start;
        margin-left: 30px;

        .title {
            margin-top: 30px;
            margin-bottom: 10px;

            h3 {
                font-size: 30px;
                font-weight: bold;
                color: #333;
            }
        }

        .description {
            margin-bottom: 30px;
            font-size: 20px;
            color: #666;
        }

        .tips {
            margin-bottom: 30px;
            font-size: 18px;
            color: #383838;

            strong {
                font-size: 16px;
                color: #383838;
            }
        }

        .example {

            margin-bottom: 30px;
            font-size: 18px;
            color: #383838;

            p {
                margin-top: 10px;
            }
        }
    }

    .codeEdit {
        width: 680px;
        height: 95vh;
    }
}
</style>
<style scoped lang="scss"></style>